<template>
	<ma-body>
		<ma-refresh slot="content" :refresh="false" :safeBottom="false">
			<image src="../../static/img/loginBg.jpg" mode="aspectFill" style="width: 100vw;height: 100%;position: absolute;top: 0;"></image>
			<!-- <div class="big-box">
				<div class="title">
					<span class="jiu-font48-fff">九歌灵藏</span>
					<span class="jiu-font32-555">一站式数字藏品铸造发售服务平台</span>
				</div>
			</div> -->
			<bottom-box style="position: fixed;bottom: 0;background-color: transparent;">
				<!-- <div class="tipText">
					<movable-area class="area-box">
						<text class="area-text">现在开始探索</text>
						<view class="gone" :style="{width: x + 'px'}"></view>
						<movable-view class="view-box" out-of-bounds="false" direction="horizontal" :y="y" :x="x"
							@change="onChange">
							<image src="../../static/img/posters.png" mode="aspectFill" class="view-img"></image>
						</movable-view>
					</movable-area> -->
					<div style="display: flex;flex-direction: column;text-align: center;align-items: center;">
						<image src="../../static/img/loginImg.png" class="pulse-one" @tap="toRegistered" mode="aspectFill" style="width: 50.93vw;height: 14vw;"></image>
						<span class="jiu-font32-555"
							style="margin-top: 4.27vw;display: block;text-align: center;font-size: 3.73vw;color: #fff;" @tap="toPassword">使用密码登录</span>
						
						<span style="font-size: 2.73vw;color: #fff;font-weight: 300;position: absolute;padding: 0 4vw;bottom: 0;">Copyright &copy; 2022 | 九歌（广州）文化科技有限公司  | <label @tap="toBei">粤ICP备2022094854号 </label></span>
						 <!-- | 联系方式 17688486610 -->
					</div>
				</div>
			</bottom-box>
		</ma-refresh>
		
	</ma-body>
</template>

<script>
	export default {
		data() {
			return {
				x: 0,
				y: 0,
				slideBarWidth: 0
			}
		},
		methods: {
			toBei(){
				window.location.href = 'https://beian.miit.gov.cn/'
			},
			onChange(e) {
				console.log(this.slideBarWidth)
				this.x = e.detail.x;
				// console.log(this.x)
				if (e.detail.x >= this.slideBarWidth) {
					this.$ma.route.registered({
						loginType: 'registerLogin'
					})
				}
			},
			toRegistered(){
				this.$ma.route.registered({
					loginType: 'registerLogin'
				})
			},
			toPassword(){
				this.$ma.route.registered({
					loginType: 'passwordLogin'
				})
			}
		},
		onLoad() {
			this.$nextTick(res=> {
				const query = uni.createSelectorQuery().in(this);
				query.select(".tipText").boundingClientRect(re=> {
					this.slideBarWidth = re.width;
				}).exec()
				console.log(7796797)
			})
		},
	}
</script>

<style lang="scss">
	.view-img {
		width: 13.87vw;
		height: 13.87vw;

		&::after {
			transform: translateX(-50%);
		}
	}

	.area-text {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gone {
		position: absolute;
		background-color: red;
		z-index: 9999;
		height: 100%;
		width: 0;
		border-radius: 8vw;
	}

	.area-box {
		background: linear-gradient(270deg, #A972FF 0%, #FFCE80 100%);
		box-shadow: 0vw 2vw 5vw rgba(71, 12, 114, 0.4800);
		width: 82.93vw;
		height: 16vw;
		border-radius: 8vw;
		display: flex;
		// align-items: center;
		// justify-content: center;

		.view-box {
			height: 100%;
			z-index: 2;
			width: 0;

			&::after {
				background-color: red;
				height: 16vw;
				border-radius: 8vw;
				transform: translatex(-50%);
			}
		}
	}


	.big-box {
		position: relative;
		padding-top: 50.67vw;
		display: flex;
		flex-direction: column;

		.title {
			display: flex;
			flex-direction: column;
			margin-left: 8.53vw;
		}

		.tipText {
			flex-direction: column;
			padding-bottom: calc(10.67vw + constant(safe-area-inset-bottom));
			/*兼容 IOS&gt;11.2*/
			padding-bottom: calc(10.67vw + env(safe-area-inset-bottom));
			/*兼容 IOS&gt;11.2*/
			flex: 1;
			display: flex;
			// width: 82.93vw;
		}
	}

	.bottomBox {
		background-color: none !important;
		padding-bottom: 10.67vw !important;
	}
</style>
